<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>知果汇</title>
    <link href="_CSS_/bootstrap.min.css" rel="stylesheet">
    <link href="_CSS_/simple-line-icons.css" rel="stylesheet">
    <link href="_CSS_/font-awesome.min.css" rel="stylesheet">
    <link href="_CSS_/jasny-bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="_CSS_/nanoscroller.css">
    <link href="_CSS_/style.css" rel="stylesheet">
    <link rel="stylesheetstyle.css" type="text/css" href="_CSS_/jquery-ui.css">
    <!--[if lt IE 9]>
    <script src="_JS_/html5shiv.min.js"></script>
    <script src="_JS_/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        body {
            background-color: #ffffff;
        }

        .row {
            margin-left: 0px;
            margin-right: 0px;
            min-width: 650px;
        }

        .radio-box {
            display: inline-block;
            width: 64px;
        }

        .formControls {
            padding-right: 50px;
            position: relative;
        }

        .textarea {
            height: 100px;
            resize: none;
            font-size: 14px;
            padding: 4px;
        }

        .textarea-numberbar {
            position: absolute;
            right: 70px;
            bottom: 5px;
            z-index: 1;
            margin-bottom: 0;
        }

        /* label{margin-right: 15px;} */
        .formControls label {
            margin-right: 15px;
        }

        input[type=checkbox] {
            vertical-align: middle;
            margin-top: 0px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-9 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="adminName" name="adminName">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="desc" name="">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">网站角色：</label>
            <div class="formControls col-xs-8 col-sm-9" id="role"></div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="button" id="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <input class="btn btn-cancel radius" id="cancel" style="color: #ffffff;background-color: #a0a0a0;"
                       type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<script src="_JS_/jquery.min.js"></script>
<script src="_JS_/bootstrap.min.js"></script>
<script src="_JS_/jasny-bootstrap.min.js"></script>
<script src="_JS_/jquery.slimscroll.min.js"></script>
<script src="_JS_/jquery.nanoscroller.min.js"></script>
<script src="_JS_/metismenu.min.js"></script>
<script src="_JS_/float-custom.js"></script>
<script type="text/javascript" src="_JS_/layer/layer.js"></script>
<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/messages_zh.min.js"></script>

<script type="text/javascript">
    $(function () {
        var url = window.location.href;
        page_id = url.split("#")[1];
        $.ajax({
            type: "get",
            url: "{:url('api/adminRole/role_add_list')}",
            jsonp: "callback",
            dataType: "jsonp",
            success: function (msg) {
                if (msg.code == 200) {
                    var html = "";
                    if (msg.data.data != null) {
                        for (var i = 0; i < msg.data.data.length; i++) {
                            html += '<dl class="permission-list"><dt><label>';
                            html += '<input type="checkbox" value="' + msg.data.data[i].id + '" name="user-Character-0" id="user-Character-0">' + msg.data.data[i].name + '</label></dt>';
                            if (msg.data.data[i].children != null) {
                                for (var j = 0; j < msg.data.data[i].children.length; j++) {
                                    html += '<dd>';
                                    html += '<dl class="cl permission-list2">';
                                    html += '<dt><label class="">';
                                    html += '<input type="checkbox" value="' + msg.data.data[i].children[j].id + '" name="user-Character-0-0" id="user-Character-0-0">' + msg.data.data[i].children[j].name + '</label></dt>';
                                    if (msg.data.data[i].children[j].child != null) {
                                        for (var k = 0; k < msg.data.data[i].children[j].child.length; k++) {
                                            html += '<dd>';
                                            html += '<label class="">';
                                            html += '<input type="checkbox" value="' + msg.data.data[i].children[j].child[k].id + '" name="user-Character-0-0-0" id="user-Character-0-0-0">' + msg.data.data[i].children[j].child[k].name + '</label>';
                                            html += '</dd>';
                                        }
                                    }
                                    html += '</dl>';
                                }
                                html += '</dd>';
                            }
                            html += '</dl>';
                        }
                    }
                    $("#role").html(html);
                    return false;
                } else if (msg.code == 1000) {
                    layer.msg(msg.message, {icon: 5, time: 2000});
                }
            },
            // error: function (XMLHttpRequest, textStatus, errorThrown) {
            //     $("#role").html("系统错误，请联系管理员");
            //     return false;
            // }
        });

        $("#submit").on("click", function () {
            var document_role = $("#role").find("input:checkbox:checked");
            var role_val = {};
            var i = 0;
            $.each(document_role, function () {
                role_val[i] = $(this).val();
                i++;
            });
            var name = $("#adminName").val();
            var desc = $("#desc").val();
            if (name == '' || name == null) {
                layer.msg("名称必填");
                return false;
            }
            $.ajax({
                type: "post",
                url: "{:url('api/AdminRole/role_add')}",
                data: {
                    'name': name,
                    'desc': desc,
                    'auth': role_val
                },
                dataType: "json",
                beforeSend: function () {
                    layer.load(1, {
                        shade: [0.2, '#666'],
                        offset: ['50%', '50%'],
                    });
                },
                success: function (msg) {
                    layer.close(layer.index);
                    if (msg.code == 200) {
                        layer.msg('添加成功,您是否要继续添加？', {
                            time: 0,
                            btn: ['继续', '关闭'],
                            yes: function (index) {
                                $("#adminName").val("");
                                $("#desc").val("");
                                $("#role").find("input:checkbox:checked").attr("checked", false);
                                layer.close(index);
                                parent.postfile(page_id);
                            },
                            btn2: function (index) {
                                parent.layer.closeAll();
                                parent.postfile(page_id);
                            }

                        });
                    } else if (msg.code == 1000) {
                        layer.msg(msg.message);
                    }

                    return false;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.close(layer.index);
                    layer.msg("添加失败");
                    return false;
                }
            });
        });

        $("#cancel").on("click", function () {
            parent.layer.closeAll();
        })

        $("#role").delegate(".permission-list dt input:checkbox", "click", function () {
            $(this).closest("dl").find("dd input:checkbox").prop("checked", $(this).prop("checked"));
        });

        $("#role").delegate(".permission-list2 dt input:checkbox", "click", function () {
            var lg = $(this).parents(".permission-list").find(".permission-list2 dd").find("input:checked").length;
            if (lg == 0) {
                $(this).parents(".permission-list").children("dt").find("input:checkbox").prop("checked", false);
            } else {
                $(this).parents(".permission-list").children("dt").find("input:checkbox").prop("checked", true);
            }
        });

        // $("#role").delegate(".permission-list2 dd input:checkbox", "click", function () {
        //     var l = $(this).parent().parent().find("input:checked").length;
        //     var l2 = $(this).parents(".permission-list").find(".permission-list2 dd").find("input:checked").length;
        //     if ($(this).prop("checked")) {
        //         $(this).closest("dl").find("dt input:checkbox").prop("checked", true);
        //         $(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked", true);
        //     }
        //     else {
        //         if (l == 0) {
        //             $(this).closest("dl").find("dt input:checkbox").prop("checked", false);
        //         }
        //         if (l2 == 0) {
        //             $(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked", false);
        //         }
        //     }
        // });
    });
</script>
</body>
</html>